@charset "utf-8";
@colorOne:#020000;
@brown:#D3AB7E;
@gray:#9FA0A0;
@vw:0.0520833333333333vw;
body{
  padding-top: 0;
  // font-family: Source Han Sans SC;
}
.navWrap{
  background-color: @colorOne;
  .navBarWrap{
    .brand{
      z-index: -1;
      width: 80*@vw;
    }
    .meun{
      .menuList{
        .item{
          a{
            color: #9DA1A6;
          }
        }
      }
      .meunIcon{
        .toggler {
          width: 30px;
          height: 30px;
          cursor: pointer;
          background-image: url(../images/24h/toggler.png);
          &:hover{
            width: 30px;
            height: 30px;
            cursor: pointer;
            background-image: url(../images/24h/toggler-active.png);
          }
        }
      }
    }
  }
}
.cd-vertical-nav{
  font-size: 14px;
  position: fixed;
  left: 2vw;
  bottom: 0;
  top: 0;
  margin: auto;
  height: 100%;
  .subNav{
    justify-content: center;
    align-items:center;
    height: 100%;
    ul{
      li{
        font-size: 20 * @vw;
        margin-bottom: 38 * @vw;
        a{
          color: #9FA0A0;
        }
        a.active{
          color: #ffffff;
        }
      }
    }
  }
}
.content{
  background-color: @colorOne;
  box-sizing: border-box;
  padding: 180*@vw 195*@vw;
  color: #ffffff;
  .section{
    .container-fluid{
      padding-left: 0;
      padding-right: 0;
    }
    .title{
      color: @brown;
      font-size: 30*@vw;
      padding-bottom: 40*@vw;
    }
    .des{
      font-size: 50*@vw;
      line-height: 1.2;
      padding-bottom: 150*@vw;
    }
    .imgText{
      font-size: 26*@vw;
      line-height: 1.46;
      .txt{
        padding: 100*@vw 0;
      }
    }
    .imgIcon{
      width: 320*@vw;
      margin:  100*@vw auto 0;
      img{
        max-width: 100%;
      }
    }
    .imgTextTwo{
      font-size: 55*@vw;
      line-height: 1.2;
      padding:370*@vw 0 260*@vw;
      box-sizing: border-box;
    }
    .sectionTitle{
      color: @brown;
      font-size: 15*@vw;
      border-bottom: 1px solid @brown;
      padding: 18*@vw 0;
    }
    .stepWrap{
      margin-bottom: 70*@vw;
      .step{
        // padding: 125*@vw 0 70*@vw;
        box-sizing: border-box;
        .stepIcon{
          width: 18px;
          margin-right: 10px;
          img{
            max-width: 100%;
            display: block;
          }
        }
        .con{
          .conTit{
            font-size: 26*@vw;
            line-height: 26*@vw;
            margin-bottom: 10*@vw;
            span{
              color: @gray;
            }
          }
          .conText{
            color:@gray;
            font-size: 24*@vw;
            line-height: 1.42;
          }
        }
      }

    }
    .stepWrap-first{
      margin-top: 130*@vw;
    }
    .sectionImgIcon{
      width: 180px;
      margin: 0 auto;
      
      img{
        max-width: 100%;
      }
    }
    .ourBrand{
      color: @gray;
      font-size: 16px;
      padding-top: 5vw;
      .brands{
        font-size: 28*@vw;
        line-height: 1.72;
        clear: both;
        p{
          cursor: pointer;
        }
        .fontStyle{
          color: #ffffff;
        }
      }
    }
    .brandImg{
      width: 40vw;
      margin:  0 auto;
      text-align: right;
      float: right;
      img{
        max-width: 100%;
      }
    }
    .imgTextThree{
      color: #ffffff;
    }
    .tip{
      color: #ffffff;
      font-size: 24*@vw;
      line-height: 1.42;
      padding-top: 110*@vw;
      padding-bottom: 90*@vw;
    }
    .caseWrap{
      justify-content: center;
      align-items: center;
      flex-direction: row;
      .left{
        ul{
          li{
            text-align: center;
            margin-left: 8px;
            position: relative;
            img{
              width: 6vw;
              height: 6vw;
              vertical-align: middle;
              border-radius: 4px;
            }
            p{
              font-size: 0.8vw;
              font-weight:400;
              text-shadow:0px 5px 5px rgba(0, 0, 0, 1);
              position: absolute;
              left: 0;
              right: 0;
              bottom: 4px;
              margin:  0 auto;
            }
          }
        }
      }
      .right{
        padding-left: 8px;
        img{
          width: 40*@vw;
          height: 40*@vw;
        }
      }
    }

  }
}

@media screen and (max-width:767px){

  .caseWrap{
    display: none;
  }

  .cd-vertical-nav{
    display: none;
  }
  .content{
    .section{
      .imgTextTwo{
        font-size: 5vw;
      }
      .caseWrap{
  
        .left{
          ul{
            li{
              img{
                width: 12vw;
                height: 12vw;
              }
              p{
                font-size: 0.8vw;
              }
            }
          }
        }
        .right{
          img{
           width: 20px;
           height: 20px;
          }
        }
      }
    }
  }
  .content .section .title,.content .section .des,
  .content .section .imgText,.content .section .sectionTitle,
  .content .section .stepWrap .step .con .conTit,.content .section .stepWrap .step .con .conText,
  .content .section .sectionTitle,.content .section .tip{
    font-size: 16px;
  }
  .brands p{
    font-size: 14px;
  }
  .col-md-6{
    padding: 0;
  }
  // .section .container-fluid .row:nth-child(2){
  //   margin-left: -15px;
  // }
  
}
@media screen and (max-width:550px){
  body{
    padding-top: 46px;
  }
  .navWrap{
    .navBarWrap{
      padding-left: 15px;
      padding-top: 10px;
      padding-bottom: 10px;
      .brand {
        width: auto;
      }
    }
  }
  .content{
    .section{
      .stepWrap{
        .step{
          .con{
            .conTit{
              margin-bottom: 10px;
            }
          }
        }
      }
    }
  }
  .col-md-8,col-md-4,.col-md-12,.col-4{
    padding: 0;
  }
  .col-8{
    padding-right: 0;
  }
}